axios.get('/dashboard')
  .then(({ data: { data: { groupData, overview, provinceData, salaryData, year } } }) => {
    console.log(groupData, overview, provinceData, salaryData, year)
    $.each(overview, function (key, value) {
      $('#row').find(`[name="${key}"]`).html(value);
    })
    //21薪资表
    const myChart1 = echarts.init($('#line')[0]);
    const option1 = {
      title: {
        left: "1%",
        top: '3%',
        text: '2021全学科薪资走势',
        textStyle: {
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: year.map(ele => ele.month),
        axisLine: {
          lineStyle: {
            type: "dashed"
          }
        }
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            type: "dashed",

          }
        }
      },
      series: [
        {
          data: year.map(ele => ele.salary),
          type: 'line',
          symbol: "emptyCircle",
          symbolSize: 10,
          lineStyle: {
            color: '#589bfe',
            width: 7
          },
          smooth: true,

          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#99c9f5' // 0% 处的颜色
              }, {
                offset: 1, color: '#f8fbfe' // 100% 处的颜色
              }],
            }
          },


        }
      ]
    };
    myChart1.setOption(option1);
    //班级薪资分布
    const myChart2 = echarts.init($('#salary')[0])

    const option2 = {
      title: {
        left: "1%",
        top: '3%',
        text: '班级薪资分布',
        textStyle: {
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        bottom: '5%',
        left: 'center'
      },
      series: [
        {
          name: '班级薪资分布',
          type: 'pie',
          color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
          radius: ['55%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },

          labelLine: {
            show: false
          },

          data: salaryData.map(function (ele) {
            return { value: ele.b_count + ele.g_count, name: ele.label }
          }),

        }
      ]
    };
    myChart2.setOption(option2);
    //柱状图
    let i = 1

    //按钮点击
    $('#btns').on('click', '.btn-xs', function () {
      $(this).addClass('btn-blue').siblings('.btn-xs').removeClass('btn-blue')
      // console.log($(this).html());
      i = $(this).html()

      const myChart3 = echarts.init($('#lines')[0])
      const option3 = {

        tooltip: {
          trigger: 'axis'
        },


        calculable: true,
        xAxis: [
          {
            type: 'category',
            // prettier-ignore
            data: groupData[i].map(ele => ele.name),
            axisLine: {
              lineStyle: {
                type: "dashed"
              }
            }
          }
        ],
        yAxis:
        {
          type: 'value',
          splitLine: {
            lineStyle: {
              type: "dashed",

            }
          }
        },


        series: [
          {
            name: '期望薪资',
            type: 'bar',
            data: groupData[i].map(ele => ele.hope_salary),
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#48d7a4' // 0% 处的颜色
              }, {
                offset: 1, color: '#cbf3e5' // 100% 处的颜色
              }],
            }

          },
          {
            name: '就业薪资',
            type: 'bar',
            data: groupData[i].map(ele => ele.salary),
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#55a5ef' // 0% 处的颜色
              }, {
                offset: 1, color: '#d4e8fb' // 100% 处的颜色
              }],
            }

          }
        ]
      };
      myChart3.setOption(option3);

    })
    $('#btn1').click()

    //男女薪资分布
    const myChart4 = echarts.init($('#gender')[0])
    var datas = [
      ////////////////////////////////////////
      salaryData.map(function (ele) {
        return { value: ele.b_count, name: ele.label }
      }),
      // ////////////////////////////////////////
      salaryData.map(function (ele) {
        return { value: ele.g_count, name: ele.label }
      }),
      ////////////////////////////////////////
    ];

    const option4 = {
      title: [{
        text: '男女薪资分布',
        left: '3%',
        top: '2%',
        textStyle: {
          color: '#494949',
          fontWeight: 700,
          fontSize: 16,
        }
      },
      {
        subtext: '男生',
        left: '50%',
        top: '43%',
        textAlign: 'center',
        subtextStyle: {
          fontSize: 12,
          color: '#494949',
          fontWeight: 700,
        }
      },
      {
        subtext: '女生',
        left: '50%',
        top: '83%',
        textAlign: 'center',
        subtextStyle: {
          fontSize: 12,
          color: '#494949',
          fontWeight: 700,
        }
      },
      ],
      tooltip: {
        trigger: 'item'
      },
      series: datas.map(function (data, idx) {
        var top = idx * 40;
        return {
          type: 'pie',
          radius: [33, 50],
          color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
          top: top + 10 + '%',
          height: '40%',
          left: 'center',
          width: 400,

          label: {


            minMargin: 5,

            lineHeight: 15,
            rich: {
              time: {
                fontSize: 10,
                color: '#999'
              }
            }
          },


          data: data
        };
      })
    };

    myChart4.setOption(option4);
    //籍贯分布
    const myChart5 = echarts.init($('#map')[0])

    provinceData.includes('内蒙古') || provinceData.push({ name: '内蒙古', value: 0 })
    provinceData.includes('西藏') || provinceData.push({ name: '西藏', value: 0 })
    provinceData.includes('山东') || provinceData.push({ name: '山东', value: 0 })
    provinceData.includes('重庆') || provinceData.push({ name: '重庆', value: 0 })
    provinceData.includes('台湾') || provinceData.push({ name: '台湾', value: 0 })
    provinceData.includes('海南') || provinceData.push({ name: '海南', value: 0 })
    provinceData.includes('香港') || provinceData.push({ name: '香港', value: 0 })
  provinceData.includes('澳门') || provinceData.push({ name: '澳门', value: 0 })
  provinceData.includes('北京') || provinceData.push({ name: '北京', value: 0 })  
  provinceData.includes('天津') || provinceData.push({ name: '天津', value: 0 })
  provinceData.includes('上海') || provinceData.push({ name: '上海', value: 0 })
  provinceData.includes('河北') || provinceData.push({ name: '河北', value: 0 })
  provinceData.includes('山西') || provinceData.push({ name: '山西', value: 0 })
  provinceData.includes('辽宁') || provinceData.push({ name: '辽宁', value: 0 })
  provinceData.includes('吉林') || provinceData.push({ name: '吉林', value: 0 })
  provinceData.includes('黑龙江') || provinceData.push({ name: '黑龙江', value: 0 })
  provinceData.includes('江苏') || provinceData.push({ name: '江苏', value: 0 })
  provinceData.includes('浙江') || provinceData.push({ name: '浙江', value: 0 })
  provinceData.includes('安徽') || provinceData.push({ name: '安徽', value: 0 })
  provinceData.includes('福建') || provinceData.push({ name: '福建', value: 0 })
  provinceData.includes('江西') || provinceData.push({ name: '江西', value: 0 })
  provinceData.includes('河南') || provinceData.push({ name: '河南', value: 0 })
  provinceData.includes('湖北') || provinceData.push({ name: '湖北', value: 0 })
  provinceData.includes('湖南') || provinceData.push({ name: '湖南', value: 0 })
  provinceData.includes('广东') || provinceData.push({ name: '广东', value: 0 })
  provinceData.includes('甘肃') || provinceData.push({ name: '甘肃', value: 0 })
  provinceData.includes('四川') || provinceData.push({ name: '四川', value: 0 })
  provinceData.includes('贵州') || provinceData.push({ name: '贵州', value: 0 })
  provinceData.includes('云南') || provinceData.push({ name: '云南', value: 0 })
  provinceData.includes('陕西') || provinceData.push({ name: '陕西', value: 0 })
  provinceData.includes('青海') || provinceData.push({ name: '青海', value: 0 })
  provinceData.includes('广西') || provinceData.push({ name: '广西', value: 0 })
  provinceData.includes('宁夏') || provinceData.push({ name: '宁夏', value: 0 })
  provinceData.includes('新疆') || provinceData.push({ name: '新疆', value: 0 })
    let promap = provinceData.map(function (ele) {
      if (ele.name.includes('省')) {
        ele.name = ele.name.replace('省', '')
      } else if (ele.name.includes('自治区')) {
        ele.name = ele.name.substring(0, 2)
      } else if (ele.name.includes('内蒙古')) {
        ele.name = '内蒙古'
      }
      return { value: ele.value, name: ele.name }
    })


    const option5 = {
      title: {
        text: '籍贯分布',
        left: '3%',
        top: '2%',
        textStyle: {
          color: '#494949',
          fontWeight: 700,
          fontSize: 16,
        }
      },
      tooltip: {
        backgroundColor: 'rgba(126, 126, 126,0.5)',
        borderColor: 'transparent',
        textStyle: {
          color: '#fff',
        },
        formatter: function (params) {
          if (params.data) return params.name + ': ' + params.data['value'] + ' 位学员'
        },

      },

      visualMap: {
        min: 0,
        max: 6,
        left: '5.5%',
        top: '57%',
        text: [6, 0],    // 文本，默认为数值文本
        calculable: false,
        inRange: {
          color: ["#ffffff", "#8ec2f8", "#0b7bf1",]
        },
      },

      series: [
        {
     
          type: 'map',
          mapType: 'china',
          itemStyle: {
            normal: {
              borderColor: '#dedede',
              areaColor: 'white',
            },
            emphasis: {
              areaColor: '#34d39a',
              shadowColor: '#34d39a',
              shadowBlur: 15,
              borderColor: 'transparent',
            }
          },
          label: {
            normal: {
              show: true,

            },
            emphasis: {
              show: true
            }
          },
          data: promap
        },

      ]
    };
    myChart5.setOption(option5)
  })
